<template>
    <div class="LoginPage">
        <div class="login-text">
            <div class="login-text-top">
                <p style="margin-bottom: 10px;">WELCOME</p>
                <p>七尾智慧社区管理系统后台</p>
            </div>
            <div class="login-text-input">
                <el-input v-model="ruleForm.username" style="height: 40px;border-radius: 0px;" size="large"
                    placeholder="Please Input" :prefix-icon="User" />
                <el-input v-model="ruleForm.password" style="height: 40px;border-radius: 0px;" size="large"
                    placeholder="Please Input" :prefix-icon="Lock" />
            </div>
            <div class="login-text-check">
                <div style="display: flex; align-items: center;">
                    <el-checkbox v-model="ruleForm.autoLanding" style="margin-top: 3px;margin-right: 5px;" />
                    <div>
                        自动登陆
                    </div>
                </div>
                <div>
                    忘记密码？
                </div>
            </div>
            <div class="login-text-button">
                <el-button type="primary" style="width: 100%;border-radius: 0px;height: 35px;"
                    @click="enterlogin">登陆</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { User, Lock } from '@element-plus/icons-vue'
import type { LoginUser } from '@/types/loginuser'
import { Logins } from '@/api/login'
import { useRouter } from 'vue-router'

const router = useRouter()
let ruleForm = ref<LoginUser>({
    username: 'demo',
    password: '123456',
    autoLanding: false
})
const enterlogin = () => {
    // axios.get('http://localhost:3000/users').then(res => {
    //     let { username, password } = res.data
    //     if (username == ruleForm.value.username || password == ruleForm.value.password) {
    //         ElMessage({ message: '登陆成功', type: 'success' })
    //     }
    // })
    Logins().then(res => {
        let { username, password } = res.data
        if (ruleForm.value.username == username && ruleForm.value.password == password) {
            ElMessage({
                message: '登陆成功',
                type: 'success',
            })
            router.replace('/')
        } else {
            ElMessage({
                message: '用户名和密码错误',
                type: 'error',
            })
        }

    })
}
</script>

<style scoped>
@import url('@/assets/Login/loginpage.css');
</style>